{extend name="base" /}
{block name="content"}

<blockquote class="layui-elem-quote">
    PHP 中文排版指南（仅供参考）
</blockquote>

<div id="content">
    <form class="layui-form layui-form-pane" action="" id="form">
        <div style="float: left; margin-bottom: 20px; margin-right: 100px; width: 40%;">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend>输入内容区域</legend>
            </fieldset>
            <textarea class="layui-textarea" id="LAY_demo1" style="display: none"></textarea>
            <br>
            <a class="layui-btn layui-btn-normal" style="margin-left: 20%;" id="copy">排版</a>
            <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
            <div class="site-demo-button" style="margin-top: 20px;">
            </div>
        </div>

        <div style="float: left; margin-bottom: 20px; width: 40%;">

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend>中文排版指南内容</legend>
            </fieldset>
            <textarea class="layui-textarea" id="demo2" style="height: 550px; "></textarea>
        </div>
    </form>
</div>
<div id="msg">

</div>
{/block}
{block name="js"}
<!--<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
<script src="__HTML__/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var $;
    layui.use('layedit', function(){
        var layedit = layui.layedit
            ,$ = layui.jquery;

        //构建一个默认的编辑器
        //var index = layedit.build('LAY_demo1');
        var index = layedit.build('LAY_demo1', {
            tool: ['center', 'right']
            ,height: 500
        });

        //编辑器外部操作
        $('#copy').on('click', function(){
            var text = layedit.getText(index);
            if (text !== '' && text !== undefined) {
                $.post("{:url('/copy/index/copy')}", {text:text}, function (data) {
                    $('#demo2').html(data);
                });
            }
        });

        $('#reset').on('click', function () {
            $('#LAY_demo1').text();
        });

        //自定义工具栏
        var demo2 = layedit.build('LAY_demo2', {
            tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right']
            ,height: 500
        })
    });
</script>
{/block}